<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :toolbar="toolbar"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
          />
        </a-card>
      </a-col>
    </a-row>
    <add
      v-if="state.modalVisible"
      @close="modalClose"
      :formId="state.currentRow.id || ''"
      :title="state.modalTitle"
      :visible="state.modalVisible"
    ></add>
  </page-layout>
</template>
<script>
export default {
  name: "channel-source"
}
</script>
<script setup>
import { filterEmptyByObject } from "@/tools/common";
import { reactive, onMounted, ref, createVNode, toRaw } from "vue";
import { message, modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import { remove, page, update } from "@/api/module/channel-source";

import add from "./modal/add.vue";

const removeKey = "remove";
const router = useRouter();
const tableRef = ref();

const handleAdd = () => {
  state.modalVisible = true;
  state.modalTitle = "新增渠道来源";
};
const state = reactive({
  modalTitle: "新增渠道来源",
  modalVisible: false,
  selectedRowKeys: [],
  param: {},
  currentRow: {},
});
const toolbar = [
  {
    code: "channel-source:add",
    label: "新增渠道",
    type: "primary",
    event: (selectedRowKeys) => {
      handleAdd();
    },
  },
];
const pagination = {
  pageNum: 1,
  pageSize: 10,
};
const handleExport = () => {};
const handlePay = () => {};
const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};

const fetch = async (param) => {
  const response = await page(param);
  if (response.success) {
    return {
      data: response.data.record,
      total: response.data.total,
    };
  } else {
    return {
      data: [],
    };
  }
};

const columns = [
  { dataIndex: "chnName", key: "chnName", title: "渠道来源" },
  {
    dataIndex: "isDel",
    key: "isDel",
    cellRender: (record, data) => {
      return data == 1 ? "不可删除" : "可以删除";
    },
    title: "是否可删除",
  },
  {
    dataIndex: "chnStatus",
    switch: {
      event: (event, record) => {
        handleSwitch(event, record)
      },
      yes: '1'
    },
    key: "chnStatus",
    title: "启用",
  },
];
const handleSwitch = (event, record) => {
  const result = toRaw(record)
  result.chnStatus = event ? '1' : '0'
  update(result)
    .then((res) => {
      if (res.success) {
        message
          .success({ content: "保存成功", duration: 1 })
          .then(() => {
            tableRef.value.reload();
          });
      } else {
        message.warning({ content: "保存失败", duration: 1 });
      }
    })
    .catch((err) => {
      console.log("err: ", err);
      message.warning({ content: "保存失败", duration: 1 });
    });
}
const operate = [
  {
    label: "修改",
    event: function (record) {
      adjustMethod(record);
    },
  },
  {
    code: 'channel-source:remove',
    label: "删除",
    show: (record) => {
      if (record.isDel == 0) {
        return true;
      }
      return false;
    },
    event: function (record) {
      removeMethod(record);
    },
  },
];
const adjustMethod = (record) => {
  state.currentRow = { ...record };
  state.modalVisible = true;
  state.modalTitle = "修改渠道来源";
};
/// 删除配置
const removeMethod = (record) => {
  modal.confirm({
    title: "您是否确定要删除此数据?",
    icon: createVNode(ExclamationCircleOutlined),
    okText: "确定",
    cancelText: "取消",
    onOk() {
      remove({ id: record.id }).then((response) => {
        if (response.success) {
          message
            .success({ content: "删除成功", key: removeKey, duration: 1 })
            .then(() => {
              tableRef.value.reload();
            });
        } else {
          message.error({ content: "删除失败", key: removeKey, duration: 1 });
        }
      });
    },
  });
};
let dictLists = reactive({
  data: {},
});

const modalClose = (value) => {
  state[value] = false;
  state.currentRow = {}
  tableRef.value.reload();
};

onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.CHANNEL_TYPE,
    dictEnum.CHANNEL_STATUS,
  ]);
});
</script>

<style scoped>
</style>
